<template>
	<view class="white-bg mg-top-30 pd-26 radius-24">
		<view class="my-h2 block-title">拍摄信息</view>
		<image :src="img" class="goods-img" mode="widthFix"></image>
		
		<!-- 标题 -->
		<view class="title flex">
			<view class="color-orange">{{name}}</view>
			<view class="line flex1 flex-column">
				<view class="flex1"></view>
				<view class="gray-line">-</view>
				<view class="flex1"></view>
			</view>
		</view>
		
		<!-- 详细说明 -->
		<view v-if="descList.length" class="detail-desc color-orange">
			<view v-for="(item, index) of descList" :key="index" class="flex flex-center">
				<image class="point" src="@/static/icon/point.png" mode="widthFix"></image>
				<text class="flex1">{{item}}</text>
			</view>
		</view>
		<!-- 备注说明 -->
		<view class="note">{{ note }}</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			img: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			note: {
				type: String,
				default: '周末及节假日取片时间会有延迟，具体取片时间以门店为主'
			}
		},
		data() {
			return {
			};
		},
		computed:{
			descHtml() {
				if (this.desc) {
					return this.desc.replace("\n", "<br/>");
				} else {
					return ''
				}
			},
			descList() {
				if (!this.desc) {
					return [];
				} else {
					return  this.desc.split("\n")
				}
			}
		}
	}
</script>

<style lang="scss">
	.block-title{
		padding: 28rpx 0;
	}
	.goods-img{
		width: 100%;
		display: block;
		font-size: 34rpx;
	}
	
	.title{
		padding: 30rpx 0;
		font-weight: bold;
	}
	.gray-line{
		height: 1px;
		background: #E9E9E9;
		margin-left: 5px;
		color: rgba(0,0,0,0);
	}
	
	.detail-desc{
		border-radius: 24rpx;
		border:1px solid #FF6E05;
		font-size: 28rpx;
		font-weight: bold;
		padding: 30rpx;
	}
	.point{
		width: 8rpx;
		margin-right:16rpx;
	}
	
	.note{
		
	}
	.note{
		font-size: 22rpx;
		color: #666666;
		padding: 20rpx 0;
	}
</style>
